<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./stylesheets/bootstrap.min.css">
    <title><%= title %></title>
    <link rel="stylesheet" type="text/css" href="./stylesheets/login_reg.css">
</head>
    <body>
         <div class="top-container">
             <div class="inner-bg">
                 <div class="container">
                     <div class="row">
                         <div class="col-sm-8 col-sm-offset-2 text">
                             <h1>
                                 <strong>My blog</strong>
                                 registration page
                             </h1>
                             <div class="description">
                                 <p>
                                     This is a registeration page written in boostorp,HTML in-depth study.I try to say something more, but not anymore.
                                 </p>
                             </div>
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-sm-6 col-sm-offset-3 form-box">
                             <div class="form-top">
                                 <div class="form-top-left">
                                     <h3>Join us</h3>

                                    <% if (locals.error.length > 0) { %> 
                                    <div id="alt_warning" class="alert alert-warning"> 
                                        <%= error %> 
                                    </div> 
                                    <% } %> 
                                 </div>
                                 <div class="form-top-right">
                                     <i class="fa fa-lock"></i>
                                 </div>
                             </div>
                             <div class="form-bottom">
                                 <form action ="/register" method="post" class="login-form">
                                    <div class="form-group">
                                        <label class="sr-only" for="form-username">Username</label>
                                        <input type="text" name="username" placeholder="Username..." class="form-username form-control" id="form-username">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-password">Password</label>
                                        <input type="password" name="password" placeholder="Password..." class="form-password form-control" id="form-password">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-password">Confirm password</label>
                                        <input type="password" name="confirm-password" placeholder="Confirm Password..." class="form-password form-control" id="form-password">
                                    </div>
                                    <button type="submit" class="btn">Register</button>
                               		<a href="/login" class="btn btn1">Sign in</a>
                                 </form>
                             </div>
                         </div>
                     </div>

                     <div class="row"></div>
                 </div>
             </div>
         </div>  
         <footer>
            <p><small>&copy;Copyring All About Gaudi</small></p>
         </footer>          
         <div class="backstretch">
             <img src="./images/default1.jpg">
         </div>
        
        <script src="./javascripts/jquery.min.js"></script>
    </body>
</html>